<template>
  <div>
    <head-nav :isBack="isBack"></head-nav>
    <!-- 占位      -->
    <div class="zanwei-top"></div>
    <div class="newlist">
      <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading"
          infinite-scroll-distance="10" infinite-scroll-immediate-check="false">
        <li v-for="(item,index) in newslist" :key="index">
          <router-link :to="{path:'/detail/'+item.ID}">
            <div class="image" :style="{height: imgHeight+'px'}" ref="img">
              <img :src="item.TP" alt="">
            </div>
            <div class=" text">
              <h3 class="bt">{{item.WZBT}}</h3>
              <div class="sjbox">
                <p class="sj">发布时间：{{item.date}}</p>
                <div style="display: flex;">
                  <p class="rdl"><i class="iconfont icon-yuedu"></i>{{item.YDS}}</p>
                  <p v-if="item.SFDZ" class="dzs">
                    <i class="iconfont icon-dianzan1"></i>{{item.DZS}}
                  </p>
                  <p v-if="item.SFPL" class="pls">
                    <i class="iconfont icon-iconfontpinglun"></i>
                    {{item.PLS}}</p>
                </div>
              </div>
            </div>
          </router-link>
        </li>
      </ul>
      <div class="list-loading" v-if="loading">
        <i class="iconfont icon-loading"></i> 加载中...
      </div>
    </div>
  </div>
</template>

<script>
  import api from '@/api/api'

  export default {
    data() {
      return {
        loading: "",
        isBack: false,
        imgHeight: 0,
        newslist: [
          {
            TP: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1405635320,305188652&fm=27&gp=0.jpg",
            title: "这里显示标题的名称名称",
            ydl: "222",
            dz: 10,
            pls: 1423,
            sj: "2018-8-8 12:40:11"
          },
        ],
        page: 1,
        moreData: true
      };
    },
    methods: {
      loadMore() {
        if (this.moreData) {
          this.loading = true;
          this.page += 1;
          this.getWzList(true)
        }
      },
      getWzList(isLoadMore) {
        let that = this;

        function timestampToTime(timestamp) {
          let date = new Date(timestamp);
          let Y = date.getFullYear() + '-';
          let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
            + '-';
          let D = date.getDate() + ' ';
          let h = date.getHours() + ':';
          let m = date.getMinutes() + ':';
          let s = date.getSeconds();
          return Y + M + D + h + m + s;
        }

        api.wz_getWzList(this, 6, this.page, res => {
          let list = res.data.data;
          let rows = list.map(y => {
            y.date = timestampToTime(y.FBSJ.time);
            try {
              y.TP = y.TP.map(x => {
                return that.host.filehost + x.ID
              });
              return y
            } catch (e) {
              return y
            }
          });
          if (isLoadMore) {
            that.newslist = that.newslist.concat(rows);
          } else {
            that.newslist = rows;
          }
          if (rows.length === 0) {
            that.moreData = false;
          }
          that.loading = false;
        });
      }
    },
    mounted() {
      this.imgHeight = this.$refs.img[0].clientWidth / 2;
      this.getWzList(false);
    }
  };
</script>

<style scoped lang="less">
  .newlist {
    .iconfont {
      font-size: .3rem;
    }
    ul {
      li {
        position: relative;
        padding: .2rem;
        a::before {
          content: "";
          position: absolute;
          z-index: 2;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 1px;
          border-bottom: 1px solid #d4d4d4;
          transform: scaleY(0.5);
          transform-origin: 0 100%;
        }
        a {
          /*display: flex;*/
          /*padding: 0.2rem 0.2rem;*/
          .image {
            width: 100%;
            overflow: hidden;
            img {
              height: 100%;
              width: 100%;
            }
          }
          .text {
            /*padding-left: 0.2rem;*/
            width: 100%;

            .bt {
              font-size: 0.35rem;
              font-weight: bold;
              margin-top: .1rem;
              text-align: justify;
            }
            .ms {
              font-size: 0.24rem;
              color: #999999;
            }
            .sjbox {
              display: flex;
              justify-content: space-between;
              padding-top: 0.2rem;
              color: #999999;
              font-size: 0.28rem;
              line-height: .32rem;
              .pls {
                /*color: #f3690a;*/
                font-weight: bold;
                margin-left: .2rem;
                .icon-iconfontpinglun {
                  font-weight: normal;
                }
              }
              .rdl {
                /*color: rgb(243, 161, 100);*/
                font-weight: bold;
                /*margin-left: .2rem;*/
                .icon-yuedu {
                  font-weight: normal;
                }
              }
              .dzs {
                /*color: #4998f3;*/
                font-weight: bold;
                margin-left: .2rem;
                .icon-dianzan1 {
                  font-weight: normal;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
